<template>
	<div id="addNew">
		<el-dialog
		  title="提示"
		  :visible.sync="editRole"
		  width="30%"
		  center
		  :before-close="handleClose">
		   <el-form>
	    	<table>
	    		<tr>
	    			<td class="title">角色名称</td>
	    			<td class="content">
	    			<el-form-item prop="roleName">
	    					<el-input v-model="editrole.roleName" :disabled="true" ></el-input>
	    				</el-form-item>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">角色描述</td>
	    			<td class="content">
	    			<el-form-item prop="roleDesc">
	    					<el-input v-model="editrole.roleDesc" :disabled="true" ></el-input>
	    				</el-form-item>
	    				</td>
	    		</tr>
	    		<tr>
	    			<td class="title">使用权限</td>
	    			<td class="content">
	    				<el-tree
						  :data="allRolePermission"
						  show-checkbox
						  default-expand-all
						  node-key="permissionDesc"
						  ref="tree"
		
						  :props="defaultProps"
						 
						  >
						  
						</el-tree>
	    			</td>
	    		</tr>
	    	</table>
	    	</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose()">取 消</el-button>
		    <el-button type="primary" @click="updateNew()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
  export default {
  	props:['editRole','editrole'],
    data() {
      return {

      		defaultProps: {
		          children: 'children',
		          label: 'permissionDesc'

		       },

      }
    },
    mounted(){
			this.$store.dispatch('loadAllPermission');
//			bus.$on('send',this.reserve);
		},
    computed:{
		allRolePermission(){
				var arr=[];
				var allRolePermission=this.$store.getters.allPermission;
				for(var key in allRolePermission){
					arr.push(allRolePermission[key]);
				}
				return arr;
		},
    },
    methods:{
    	handleClose(){
    		this.$parent.editRole=false;
    	},
    	updateNew(){
           	//接口需要id和权限
           	//获取权限节点
           	var permissions=[];
           	this.$refs.tree.getCheckedNodes().forEach((item)=>{
           		permissions.push(item._id);
           		 console.log(item)
           	})
           	console.log(permissions)
           	//直接建立一个对象
       		var updateRole={id:this.editrole._id,permissions:permissions}
       		//直接传这个对象
       		console.log(updateRole);
       		this.$http.post('/updateRoleInfo',updateRole)
       		.then((resp)=>{
         			this.$message({
       				message:resp.data.success?resp.data.message+"成功":resp.data.message+"失败",
       				type:resp.data.success?"success":"danger"
       			})
         			console.log(resp);
         			this.$parent.editRole=false;
         			this.$store.dispatch('loadAllRoles')
       		})
    	}
    },
    //监听权限
    watch:{
    	editrole(newvalue){
    		//新建数组来接受权限,异步，完全加载完选择完成后一同插入
    		setTimeout(()=>{
    			var defaultPermission=[];
    		//获取遍历所有权限判断所选权限是否存在
    			this.allRolePermission.forEach((item)=>{
    			if(newvalue.permissions.indexOf(item._id)!=-1){
    				defaultPermission.push(item);
    			}
    			
    		 })
    		this.$refs.tree.setCheckedNodes(defaultPermission)
    		},0)
    		
    	}
    }
  }
</script>
<style lang="scss" scoped>
	.title{
		width: 30%;
		text-align: center;
		line-height: 38px;
	
	}
	.content{
		width: 70%;
	}
</style>